{#隧道#}
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传隧道轮廓信息</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .navbar {
            display: flex;
            justify-content: center;
            background-color: #007bff;
            padding: 10px;
        }
        .navbar a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
            padding: 5px 10px;
        }
        .navbar a.active {
            background-color: #ffdd57;
            border-radius: 5px;
        }
        .container {
            max-width: 1200px;
            margin-top: 50px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
        }
        h2 {
            color: #343a40;
            font-weight: bold;
        }
        .btn-primary {
            width: 100%;
            font-size: 16px;
            padding: 10px;
        }
        .img-container {
            text-align: center;
            margin-bottom: 20px;
        }
        .img-container img {
            width: 100%;
            height: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>
<!-- 导航栏 -->
<div class="navbar">
    <a href="{% url 'index' %}">首页</a>
    <a href="{% url 'upload_geological_info_user' %}">掌子面</a>
    <a href="{% url 'upload_excavation_calculation_user' %}">超欠挖计算</a>
    <a href="{% url 'upload_excavation_diagnosis_user' %}">超欠挖诊断</a>
    <a href="{% url 'upload_tunnel_info_user' %}">隧道信息</a>
</div>

<div class="container">
    <h2 class="text-center mb-4">上传隧道轮廓信息</h2>
    <div class="row">
        <!-- 左侧图片 -->
        <div class="col-md-6">
            <div class="img-container">
                <img src="{% static 'images/屏幕截图 2024-12-29 193252.png' %}" alt="隧道轮廓示例图像">
                <p>隧道轮廓示例图像</p>
            </div>
            <div class="img-container">
                <img src="{% static 'images/屏幕截图 2024-12-29 193252.png' %}" alt="轮廓检测图像">
                <p>轮廓检测图像</p>
            </div>
        </div>

        <!-- 右侧表单 -->
{#        <div class="col-md-6">#}
{#            <form method="post">#}
{#                {% csrf_token %}#}
{#                {% if errors %}#}
{#                    <div class="alert alert-danger">#}
{#                        <ul>#}
{#                            {% for field, error in errors.items %}#}
{#                                <li>{{ field }}: {{ error|join:", " }}</li>#}
{#                            {% endfor %}#}
{#                        </ul>#}
{#                    </div>#}
{#                {% endif %}#}
{#                <div class="row">#}
{#                    <!-- 添加掌子面编号和施工项目编号 -->#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.face_id.label_tag }} <!-- 掌子面编号 -->#}
{#                        {{ form.face_id }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.project_id.label_tag }} <!-- 施工项目编号 -->#}
{#                        {{ form.project_id }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.inspection_date.label_tag }} <!-- 检查日期 -->#}
{#                        {{ form.inspection_date }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.measurement_date.label_tag }} <!-- 测量日期 -->#}
{#                        {{ form.measurement_date }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.inspector.label_tag }} <!-- 测量人员 -->#}
{#                        {{ form.inspector }}#}
{#                    </div>#}
{#                    <!-- 隧道轮廓信息字段 -->#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.od.label_tag }} <!-- 超挖深度 -->#}
{#                        {{ form.od }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.rcl.label_tag }} <!-- 轮廓粗糙度 -->#}
{#                        {{ form.rcl }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.vo.label_tag }} <!-- 纵向超挖变化 -->#}
{#                        {{ form.vo }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.cr.label_tag }} <!-- 调整指数范围 -->#}
{#                        {{ form.cr }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.w1.label_tag }} <!-- 权重W1 -->#}
{#                        {{ form.w1 }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.w2.label_tag }} <!-- 权重W2 -->#}
{#                        {{ form.w2 }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.w3.label_tag }} <!-- 权重W3 -->#}
{#                        {{ form.w3 }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.c1.label_tag }} <!-- 修正因子C1 -->#}
{#                        {{ form.c1 }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.c2.label_tag }} <!-- 修正因子C2 -->#}
{#                        {{ form.c2 }}#}
{#                    </div>#}
{#                    <div class="col-md-6 mb-3">#}
{#                        {{ form.c3.label_tag }} <!-- 修正因子C3 -->#}
{#                        {{ form.c3 }}#}
{#                    </div>#}
{#                </div>#}
{#                <div class="mb-3">#}
{#                    <label for="operation_reason" class="form-label">操作理由</label>#}
{#                    <textarea id="operation_reason" name="operation_reason" class="form-control" rows="3" placeholder="请输入操作理由" required></textarea>#}
{#                </div>#}
{#                <!-- 提交按钮居中 -->#}
{#                <div class="form-container d-flex justify-content-center mt-4">#}
{#                    <button type="submit" class="btn btn-primary w-50">提交</button>#}
{#                </div>#}
{#            </form>#}
{#        </div>#}

        <div class="col-md-6">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                {% if errors %}
                    <div class="alert alert-danger">
                        <ul>
                            {% for field, error in errors.items %}
                                <li>{{ field }}: {{ error|join:", " }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

                <!-- 表单部分 -->
                <div id="form-section">
                    <div class="row">
                        <!-- 添加隧道编号和施工项目编号 -->
                        <div class="col-md-6 mb-3">
                            {{ form.face_id.label_tag }} <!-- 隧道编号 -->
                            {{ form.face_id }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.project_id.label_tag }} <!-- 施工项目编号 -->
                            {{ form.project_id }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.inspection_date.label_tag }} <!-- 检查日期 -->
                            {{ form.inspection_date }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.measurement_date.label_tag }} <!-- 测量日期 -->
                            {{ form.measurement_date }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.inspector.label_tag }} <!-- 测量人员 -->
                            {{ form.inspector }}
                        </div>
                        <!-- 隧道轮廓信息字段 -->
                        <div class="col-md-6 mb-3">
                            {{ form.od.label_tag }} <!-- 超挖深度 -->
                            {{ form.od }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.rcl.label_tag }} <!-- 轮廓粗糙度 -->
                            {{ form.rcl }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.vo.label_tag }} <!-- 纵向超挖变化 -->
                            {{ form.vo }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.cr.label_tag }} <!-- 调整指数范围 -->
                            {{ form.cr }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.w1.label_tag }} <!-- 权重W1 -->
                            {{ form.w1 }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.w2.label_tag }} <!-- 权重W2 -->
                            {{ form.w2 }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.w3.label_tag }} <!-- 权重W3 -->
                            {{ form.w3 }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.c1.label_tag }} <!-- 修正因子C1 -->
                            {{ form.c1 }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.c2.label_tag }} <!-- 修正因子C2 -->
                            {{ form.c2 }}
                        </div>
                        <div class="col-md-6 mb-3">
                            {{ form.c3.label_tag }} <!-- 修正因子C3 -->
                            {{ form.c3 }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="operation_reason" class="form-label">操作理由</label>
                        <textarea id="operation_reason" name="operation_reason" class="form-control" rows="3" placeholder="请输入操作理由" required></textarea>
                    </div>
                </div>

                <!-- 文件上传部分 -->
                <div class="form-group mt-3" id="bulk-upload-section" style="display: none;">
                    <label for="excel_file" class="form-label">选择进行批量导入的 Excel 文件</label>
                    <input type="file" name="excel_file" id="excel_file" class="form-control" accept=".xls,.xlsx">
                </div>

                <!-- 提交按钮 -->
                <div class="d-flex justify-content-between mt-3">
                    <button type="submit" name="submit_type" value="single" class="btn btn-primary w-100" id="single-submit-btn">提交单条记录</button>
                    <button type="submit" name="submit_type" value="bulk" class="btn btn-success w-100" id="bulk-submit-btn" style="display: none;">批量提交</button>
                </div>
                <!-- 切换按钮 -->
                <button type="button" id="switch-to-bulk" class="btn btn-secondary w-100 mt-3">切换到批量导入</button>
                <button type="button" id="switch-to-single" class="btn btn-secondary w-100 mt-3" style="display: none;">切换到单条记录提交</button>
            </form>
        </div>


    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 切换到批量导入模式
    document.getElementById('switch-to-bulk').addEventListener('click', function () {
        document.getElementById('single-submit-btn').style.display = 'none';
        document.getElementById('bulk-submit-btn').style.display = 'block';
        document.getElementById('bulk-upload-section').style.display = 'block';
        document.getElementById('switch-to-bulk').style.display = 'none';
        document.getElementById('switch-to-single').style.display = 'block';

        // 锁定表单字段
        document.querySelectorAll('#form-section input, #form-section select, #form-section textarea').forEach(function (field) {
            field.setAttribute('readonly', true);
            field.setAttribute('disabled', true);
        });
    });

    // 切换到单条记录提交模式
    document.getElementById('switch-to-single').addEventListener('click', function () {
        document.getElementById('single-submit-btn').style.display = 'block';
        document.getElementById('bulk-submit-btn').style.display = 'none';
        document.getElementById('bulk-upload-section').style.display = 'none';
        document.getElementById('switch-to-bulk').style.display = 'block';
        document.getElementById('switch-to-single').style.display = 'none';

        // 解锁表单字段
        document.querySelectorAll('#form-section input, #form-section select, #form-section textarea').forEach(function (field) {
            field.removeAttribute('readonly');
            field.removeAttribute('disabled');
        });
    });
</script>

<div class="mt-3 text-center">
    <!-- 返回主界面按钮 -->
    <a href="{% url 'index' %}" class="btn btn-secondary mx-2">返回首页</a>
</div>
</body>
</html>
